什麼是React?

React是由Facebook工程師開發針對UI的前端JavaScript開源函式庫，目前正在被Netflix、Imgur、Instergram、Airbnb等網站做主頁的使用。

用React的好處

1.運用元件化思考，讓元件有封裝並能夠重複使用的特性，元件之間不會互相干擾，也容易維護。
2.很有效率的利用Virtual DOM達到即時更新的效果。
3.使用JSX語法配合Babel輕鬆編寫。

Virtual DOM?

一般傳統的Web使用jQuery進行DOM的操作，DOM使用一個樹狀結構統一 HTML、XML 和 SVG規範，但他超慢的，往往網頁更改了一個小東西，都要重繪一次，在網頁元件多的時候顯得更加低效率以及吃效能，因此React做了Virtual DOM當作虛擬的中介層，使用React的diff演算法讓App與DOM去做比對，只重繪有更新的部分，這樣大大增加了效能。

JSX? Babel?

React使用純JS在前端產生HTML，如果直接用原生的JS會長這樣

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

但它在JSX裡面長這樣

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

是不是看起來簡單而且直覺多了?
但我們要如何把JSX轉變成純JS讓React看得懂呢，這時候就要使用Babel，它會把JSX直接編譯成React看得懂的JS。